import React, { Component } from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import {BackHandler, Platform} from 'react-native';
import {Alert, Image} from 'react-native';
import HomePage from "./home_page";
import JobPage from "./job_page";
import CommunityPage from "./community";
import MessagePage from "./message";
import MinePage from "./mine_page";

const Tab = createBottomTabNavigator();

class MyTabs extends Component {
  componentDidMount() {
    if (Platform.OS === 'android'){
      BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
    }
  }
  componentWillUnmount() {
    if (Platform.OS === 'android') {
      BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);
    }
  }
  onBackAndroid = () => {
    //禁用返回键
    if(this.props.navigation.isFocused()) {//判断   该页面是否处于聚焦状态
      if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {
        //最近2秒内按过back键，可以退出应用。
        // return false;
        BackHandler.exitApp();//直接退出APP
      }else{
        this.lastBackPressed = Date.now();
        return true;
      }
    }
  }

  render() {
    return (
      <Tab.Navigator screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let image;
          if (route.name === "Home") {
            if (focused) {
              image = <Image source={require("../../img/tab_home_selected.png")} style={{ width: 23, height: 23 }}></Image>;
            } else {
              image = <Image source={require("../../img/tab_home_gray.png")} style={{ width: 23, height: 23 }}></Image>;
            }
          }
          else if (route.name === "Work") {
            if (focused) {
              image = <Image source={require("../../img/tab_work_selected.png")} style={{ width: 23, height: 23 }}></Image>;
            } else {
              image = <Image source={require("../../img/tab_work_gray.png")} style={{ width: 23, height: 23 }}></Image>;
            }
          } else if(route.name==='Community'){
            if (focused) {
              image = <Image source={require("../../img/tab_community_selected.png")} style={{ width: 23, height: 23 }}></Image>;
            } else {
              image = <Image source={require("../../img/tab_commuity_gray.png")} style={{ width: 23, height: 23 }}></Image>;
            }
          }else if (route.name === "Message") {
            if (focused) {
              image =
                <Image source={require("../../img/tab_message_selected.png")} style={{ width: 23, height: 23 }}></Image>;
            } else {
              image =
                <Image source={require("../../img/tab_message_gray.png")} style={{ width: 23, height: 23 }}></Image>;
            }
          } else if (route.name === "Mine") {
            if (focused) {
              image = <Image source={require("../../img/tab_mine_selected.png")} style={{ width: 23, height: 23 }}></Image>;
            } else {
              image = <Image source={require("../../img/tab_mine_gray.png")} style={{ width: 23, height: 23 }}></Image>;
            }
          }
          return image;
        },
      })}

        // 底部文字切换颜色
        tabBarOptions={{
          activeTintColor: "#E39354",
          inactiveTintColor: "#979A9E",
        }}>
        <Tab.Screen name="Home" component={HomePage} options={{
          title: '首页',
          headerShown: false
        }}/>
        <Tab.Screen name="Work" component={JobPage} options={{
          title: '兼职网',
          headerShown: false
        }}/>
        <Tab.Screen name="Community" component={CommunityPage} options={{
          title: '社区',
          headerShown: false
        }}/>
        <Tab.Screen name="Message" component={MessagePage} options={{
          title: '消息',
          headerShown: false
        }}/>
        <Tab.Screen name="Mine" component={MinePage} options={{
          title: '我的',
          headerShown: false
        }}/>
      </Tab.Navigator>
    );
  }
}

export default module = MyTabs;
